<template>
  <div class="login w-100 h-100">
    <div class="login-box">
      <div class="left">
        <img
          src="http://lin0716.gitee.io/gi-demo/assets/login-img-1c12ae60.svg"
          alt=""
          srcset=""
        />
      </div>
      <div class="right">
        <div class="form-box">
          <div class="logo">
            <img src="../../assets/img/logo/logo.gif" alt="" srcset="" />
            <h3>商家版</h3>
          </div>
          <div class="form">
            <el-form
              ref="formRef"
              :model="dynamicValidateForm"
              label-width="auto"
              class="demo-dynamic"
            >
              <el-form-item
                prop="username"
                label="账号"
                :rules="[
                  {
                    required: true,
                    message: '请输入账号',
                    trigger: 'blur',
                  },
                  {
                    type: 'string',
                    message: '账号不合法',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-model="dynamicValidateForm.username"
                  placeholder="请输入账号"
                />
              </el-form-item>

              <el-form-item
                prop="password"
                label="密码"
                :rules="[
                  {
                    required: true,
                    message: '密码不能为空!',
                    trigger: 'blur',
                  },
                  {
                    type: 'string',
                    message: '密码输入不合法!',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  v-model="dynamicValidateForm.password"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
            </el-form>

            <el-button
              class="login-but"
              type="primary"
              @click="submitForm(formRef)"
              >立即登入</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { useUserStore } from '@/store'
import router from '@/router'

const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  username: string
  password: string
}>({
  username: '',
  password: '',
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      useUserStore().login(dynamicValidateForm)
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('http://zxc.ruanjian211.top/cvmagic-buyer/image/2023/05/28/1662629133581127680.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .login-box {
    width: 720px;
    height: 380px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;

    .left {
      width: 450px;
      height: 100%;
      background-color: #4293fe;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      > img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      width: 270px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 0 20px;
      padding-top: 60px;

      .form-box {
        width: 250px;
        height: 100%;

        .logo {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          > img {
            width: 35px;
            height: 35px;
          }
          > h3 {
            line-height: 35px;
            font-size: 20px;
            margin-left: 10px;
          }
        }

        .form {
          margin-top: 30px;
        }

        .login-but {
          width: 100%;
          margin-top: 20px;
        }
        .register {
          float: right;
          margin-top: 10px;
        }
        .register:after {
          display: block;
          content: '';
          height: 0;
          clear: both;
          visibility: hidden;
        }
      }
    }
  }
}
</style>
